import Image from "next/image"; import VideoPlayer from "../../../components/videoPlayer"; import Link from "next/link"; import { closestMatch } from "closest-match"; import Head from "next/head"; import { useState } from "react"; import Modal from "../../../components/modal"; import { useNotification } from "../../../lib/useNotify"; import { signIn } from "next-auth/react"; import { getServerSession } from "next-auth/next"; import { authOptions } from "../../api/auth/[...nextauth]"; import AniList from "../../../components/media/aniList"; import { Navigasi } from "../.."; export default function Info({ info, sessions, statusWatch }) { const title = info.aniData.title.romaji || info.aniData.title.english; const data = info.aniData; const fallback = info.epiFallback; const { Notification: NotificationComponent } = useNotification(); let playingEpisode = data.episodes .filter((item) => item.id == info.id) .map((item) => item.number); if (playingEpisode == 0) { playingEpisode = fallback .filter((item) => item.id == info.id) .map((item) => item.number); } const [open, setOpen] = useState(false); const [aniStatus, setAniStatus] = useState(""); const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode)); const handleStatus = (e) => { setAniStatus(e.target.value); }; const handleProgress = (e) => { const value = parseFloat(e.target.value); if (!isNaN(value) && value >= 0 && value <= data.totalEpisodes) { setAniProgress(value); } }; const handleSubmit = (e) => { e.preventDefault(); const formData = { status: aniStatus, progress: aniProgress }; console.log(formData); }; const playingTitle = data.episodes .filter((item) => item.id == info.id) .map((item) => item.title); // console.log(info.skip); return ( <> {fallback ? data.title.romaji || data.title.english : playingTitle} setOpen(false)}>

Save this Anime to Your List

{!sessions && ( )} {sessions && ( <>
)}
{data.episodes.length > 0 ? ( data.episodes .filter((items) => items.id == info.id) .map((item) => (
{item.title}

Episode {item.number}

)) ) : ( <> {fallback .filter((item) => item.id == info.id) .map((item) => (
{title}

Episode {item.number}

))} )}
Anime Cover

Studios

{data.studios}
setOpen(true)}> {/* Save to My List */}

Status

{data.status}

Titles

{data.title.romaji || ""}
{data.title.english || ""}
{data.title.native || ""}
{data.genres.map((item, index) => (
{item}
))}

Up Next

{data.episodes.length > 0 ? data.episodes.map((item) => { return (
image Episode {item.number} {item.id == info.id && (
)}

{item.title}

{item.description}

); }) : fallback.map((item) => { return ( Episode {item.number} ); })}
); } export async function getServerSideProps(context) { const session = await getServerSession(context.req, context.res, authOptions); const { info } = context.query; if (!info) { return { notFound: true, }; } const id = info[0]; const aniId = info[1]; let epiFallback = null; const res = await fetch(`https://api.moopa.my.id/meta/anilist/watch/${id}`); const epiData = await res.json(); const res2 = await fetch( `https://api.moopa.my.id/meta/anilist/info/${aniId}` ); const aniData = await res2.json(); if (aniData.episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ aniData.title.romaji || aniData.title.english }` ); const data = await res.json(); const match = closestMatch( aniData.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); epiFallback = infos.episodes; } } const playingEpisode = aniData.episodes .filter((item) => item.id == id) .map((item) => item.number) || epiFallback.episodes .filter((item) => item.id == id) .map((item) => item.number); const response = await fetch("https://graphql.anilist.co/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: ` query ($username: String, $status: MediaListStatus) { MediaListCollection(userName: $username, type: ANIME, status: $status, sort: SCORE_DESC) { user { id name about (asHtml: true) createdAt avatar { large } statistics { anime { count episodesWatched meanScore minutesWatched } } bannerImage mediaListOptions { animeList { sectionOrder } } } lists { status name entries { id mediaId status progress score media { id status title { english romaji } episodes coverImage { large } } } } } } `, variables: { username: session?.user.name, }, }), }); const dat = await response.json(); const prog = dat.data.MediaListCollection; const gat = prog?.lists.map((item) => item.entries); const git = gat?.map((item) => item.find((item) => item.media.id === parseInt(aniId)) ); const gut = git?.find((item) => item?.media.id === parseInt(aniId)); let statusWatch = "CURRENT"; if (gut?.status === "COMPLETED") { statusWatch = "REPEATING"; } else if ( gut?.status === "REPEATING" && gut?.media?.episodes === parseInt(playingEpisode) ) { statusWatch = "COMPLETED"; } else if (gut?.status === "REPEATING") { statusWatch = "REPEATING"; } else if (aniData.totalEpisodes === parseInt(playingEpisode)) { statusWatch = "COMPLETED"; } const res4 = await fetch( `https://api.aniskip.com/v2/skip-times/${aniData.malId}/${parseInt( playingEpisode )}?types[]=ed&types[]=mixed-ed&types[]=mixed-op&types[]=op&types[]=recap&episodeLength=` ); const skip = await res4.json(); const op = skip.results?.find((item) => item.skipType === "op") || null; const ed = skip.results?.find((item) => item.skipType === "ed") || null; return { props: { info: { id, epiData, aniData, epiFallback, skip: { op: op, ed: ed, }, }, sessions: session, statusWatch: statusWatch, }, }; }